<template>
  <el-dialog
    title="新建知识图谱项目"
    :visible="showCreatePanel"
    @close="disablePanel()"
    width="45%"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="150px"
      :rules="xmlInput ? rulesWithXml : rulesWithoutXml"
    >
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <el-form-item label="项目描述" prop="description">
        <el-input
          type="textarea"
          placeholder="请输入项目描述"
          :autosize="{ minRows: 2, maxRows: 4 }"
          v-model="form.description"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目权限" prop="status">
        <el-radio-group size="mini" v-model="statusRadio">
          <el-radio label="私密"></el-radio>
          <el-radio label="公开"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="知识图谱xml" prop="xml">
        <el-radio-group size="mini" v-model="xmlRadio">
          <el-radio label="空项目" @change="disableXmlInput()"></el-radio>
<!--          <el-radio label="xml导入" @change="visibleXmlInput()"></el-radio>-->
          <el-radio label="文件导入" @change="openFileDialog"></el-radio>
        </el-radio-group>
        <el-input
          v-if="xmlInput"
          type="textarea"
          placeholder="请输入知识图谱 xml"
          :autosize="{ minRows: 5, maxRows: 12 }"
          v-model="form.xml"
        ></el-input>
        <!-- 隐藏的文件输入框 -->
        <input
          ref="fileInput"
          type="file"
          @change="handleFileChange"
          accept=".xlsx,.xls"
          style="display: none"
        />
        <!-- 显示所选文件名和删除按钮 -->
        <div v-if="selectedFileName">
          文件名称：{{ selectedFileName }}
          <el-button size="mini" type="text" @click="deleteSelectedFile">删除</el-button>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm()">重 置</el-button>
      <el-button type="primary" @click="doneCreate()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { $message } from '@/common/utils'

export default {
  name: 'NewProjectPanel',
  data() {
    return {
      form: {
        name: '',
        description: '',
        xml: '',
        status: '',
      },
      xmlInput: false,
      xmlRadio: '空项目',
      statusRadio: '私密',
      rulesWithXml: {
        name: [{ required: true, message: '项目名称不能为空!' }],
        description: [{ required: true, message: '项目描述不能为空!' }],
        xml: [{ required: true, message: '知识图谱 xml 不能为空!' }],
      },
      rulesWithoutXml: {
        name: [{ required: true, message: '项目名称不能为空!' }],
        description: [{ required: true, message: '项目描述不能为空!' }],
      },
      selectedFile: null,
      selectedFileName: ''
    }
  },
  computed: {
    ...mapGetters(['showCreatePanel', 'userId']),
  },
  methods: {
    ...mapMutations(['setShowCreatePanel']),
    ...mapActions(['createProject', 'setDataByExcel']),
    doneCreate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const { name, description, xml, status } = this.form
          const projectParam = {
            name,
            description,
            userId: Number(this.userId),
            status: this.statusRadio === '私密' ? 'PRIVATE' : 'PUBLIC',
            xml: xml === '空项目' ? '' : xml,
          }
          this.createProject(projectParam)
            .then((projectId) => {
              this.setShowCreatePanel(false)
              if (this.selectedFile) {
                const formData = new FormData();
                formData.append('file', this.selectedFile);
                formData.append('projectParam', JSON.stringify(projectParam));
                formData.append('projectId', projectId)
                this.setDataByExcel(formData)
                  .then((response) => {
                    this.$root.$emit('project-created')
                    console.log('上传成功:', response.data);
                  })
                  .catch((error) => {
                    console.error('上传失败:', error);
                    $message.error('文件上传失败');
                  });
              } else {
                this.$root.$emit('project-created');
              }
            })
            .catch((error) => {
              console.error('项目创建失败:', error);
              $message.error('项目创建失败');
            });
        }
        return false;
      });
    },
    disablePanel() {
      this.setShowCreatePanel(false);
    },
    disableXmlInput() {
      this.xmlInput = false;
    },
    visibleXmlInput() {
      this.xmlInput = true;
    },
    openFileDialog() {
      this.xmlInput = false;
      this.$refs.fileInput.click();
    },
    handleFileChange(event) {
      const files = event.target.files;
      if (files.length > 0) {
        this.selectedFile = files[0];
        this.selectedFileName = this.selectedFile.name;
      }
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.selectedFile = null;
      this.selectedFileName = '';
      this.$refs.fileInput.value = '';
    },
    // 删除所选文件的方法
    deleteSelectedFile() {
      this.selectedFile = null;
      this.selectedFileName = '';
      this.$refs.fileInput.value = '';
    }
  },
}
</script>

<style></style>
